import React from 'react';

// export default class Input extends React.Component {
//   inputRef;

//   componentDidMount() {
//     this.inputRef.focus();
//   }

//   render() {
//     return <input ref={ele => (this.inputRef = ele)} />;
//   }
// }

class Hello extends React.Component {
  state = { greeting: 'millet' };

  sayHello = () => {
    alert('Hello: ' + this.state.greeting);
  };

  render() {
    return <div>Hello children</div>;
  }
}

export default class Input extends React.Component {
  state = {
    value: '',
  };

  inputRef = React.createRef();

  componentDidMount() {
    console.log(this.inputRef);
    // this.inputRef.current.sayHello();
    // this.inputRef.current.focus();
    // this.inputRef.current.value = '123123';
  }

  onInputFocus = () => {
    this.setState({ value: '默认的初始值' });
  };

  onInputChange = event => {
    console.log(event.target.value);
    this.setState({ value: event.target.value + event.target.value });
  };

  render() {
    const { value } = this.state;
    return (
      <>
        <h2>{value}</h2>
        <input
          onFocus={this.onInputFocus}
          onChange={this.onInputChange}
          value={value}
        />
        <Hello ref={this.inputRef} />
      </>
    );
  }
}
